<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<body>
    <div id="app">
        <router-link to="/hdphp">HDPHP</router-link>
        <router-link to="/hdcms">HDCMS</router-link>
        <router-view></router-view>
    </div>
<script>

    const hdphp={
        template:'<h1>php</h1>'
    };
    const hdcms={
        template:'<h1>cms</h1>'
    };
     routes:[
        {path:'/hdphp',component:hdphp},
        {path:'/hdcms',component:hdcms},
    ];
    //组件交给路由器
    let route = new VueRouter({
        routes:[
            {path:'/hdphp',component:hdphp},
            {path:'/hdcms',component:hdcms},
        ]
    });


    var app=new Vue({
        el:'#app',
        router:route,

        data:{
            type:true,
            title:'后端君',
        }
    });

</script>

</body>
</html>